<template>
  <div class="mine">
    <!-- VIP Badge -->
    <div
      class="vip-badge"
      :class="{
        'vip-none': userInfo.vipLevel == 0,
        'vip-1': userInfo.vipLevel == 1,
        'vip-2': userInfo.vipLevel == 2,
        'vip-3': userInfo.vipLevel == 3,
        'vip-4': userInfo.vipLevel == 4,
        'vip-5': userInfo.vipLevel == 5,
      }"
    >
      <span class="vip-text">VIP</span>
      <span v-if="userInfo.vipLevel > 0" class="vip-level">{{
        userInfo.vipLevel
      }}</span>
    </div>

    <!-- Header Section -->
    <div class="header">
      <div class="header-bg"></div>
      <div class="user-info">
        <van-image
          class="avatar"
          round
          width="60"
          height="60"
          :src="avatar"
          alt="avatar"
        />
        <div class="info">
          <div class="email">{{ userInfo.email }}</div>
          <div class="uid">UID:{{ userInfo.id }}</div>
          <div class="credit">
            <span class="label">Credit Score:</span>
            <span class="value">{{ userInfo.creditScore }}</span>
          </div>
          <div class="balance">
            Available Balance:{{ userInfo.availableBalance }} INR
          </div>
        </div>
      </div>
    </div>

    <!-- Menu List -->
    <van-cell-group class="menu-list">
      <van-cell title="Payment Info" is-link class="menu-item" @click="goPaymentInfo">
        <template #icon>
          <van-icon name="credit-pay" class="icon-wrapper payment-icon" />
        </template>
      </van-cell>

      <van-cell title="Identity Verification" is-link class="menu-item" @click="goVerification">
        <template #icon>
          <van-icon name="shield-o" class="icon-wrapper verify-icon" />
        </template>
      </van-cell>

      <van-cell title="Messages" is-link class="menu-item" @click="goMessage">
        <template #icon>
          <van-icon name="comment-o" class="icon-wrapper message-icon" />
        </template>
      </van-cell>

      <van-cell title="Settings" is-link class="menu-item" @click="goSettings">
        <template #icon>
          <van-icon name="setting-o" class="icon-wrapper settings-icon" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup name="User">
import { reactive, ref } from "vue";
import { Image as VanImage, Icon as VanIcon, Cell, CellGroup } from "vant";
import avatar from "../assets/avatar.svg";
import { UserApi } from "@/api/user.api";
import { useRouter } from "vue-router";
const router = useRouter();
// You can add reactive data here if needed
const userInfo = ref({});
const goPaymentInfo = () => {
  router.push("/paymentInfo"); // 替换为实际的路由路径 
}
const goVerification = () => {
  router.push("/verification"); // 替换为实际的路由路径
};
const goMessage = () => {
  router.push("/message"); // 替换为实际的路由路径
};
const goSettings = () => {
  router.push("/settings"); // 替换为实际的路由路径
};
const init = () => {
  UserApi.wallet().then((res) => {
    if (res.code == 200) {
      userInfo.value = res.data;
    }
  });
};
init();
</script>

<style scoped>
.mine {
  height: 100vh;
  background: #f5f5f5;
  padding-bottom: 60px;
  box-sizing: border-box;
}

.vip-5{
  background: linear-gradient(45deg, #B9F2FF, #4F94CD);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 2px 15px #b9f2ff99;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  animation: diamondShine-0760b1fc 4s infinite;
}
@keyframes diamondShine-0760b1fc {
  0%,to {
      filter: brightness(1) contrast(1);
      box-shadow: 0 2px 15px #b9f2ff99
  }

  50% {
      filter: brightness(1.4) contrast(1.2);
      box-shadow: 0 2px 20px #b9f2ffcc
  }
}
.vip-4{
  background: linear-gradient(45deg, #E5E4E2, #7B7B7B);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 2px 12px #e5e4e280;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  animation: platinumShine-0760b1fc 4s infinite;
}
@keyframes platinumShine-0760b1fc {
  0%,to {
      filter: brightness(1) contrast(1)
  }

  50% {
      filter: brightness(1.3) contrast(1.1)
  }
}
.vip-3 {
  background: linear-gradient(45deg, #ffd700, #daa520);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 12px #ffd70066;
  animation: goldShine-0760b1fc 3s infinite;
}
@keyframes goldShine-0760b1fc {
  0%,to {
      filter: brightness(1)
  }

  50% {
      filter: brightness(1.2) saturate(1.2)
  }
}
.vip-2 {
  background: linear-gradient(45deg, #e6e8fa, #a9a9a9);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 8px #c0c0c066;
}
.vip-1 {
  background: linear-gradient(45deg, #cd7f32, #8b4513);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px #cd7f324d;
}
.vip-none {
  background: linear-gradient(45deg, #999, #666);
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.8;
}
.vip-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px #00000026;
}

.vip-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.vip-level {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.header {
  position: relative;
  color: #fff;
  padding: 20px 15px;
  height: 200px;
  box-sizing: border-box;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(134deg, #3965eb, #8ac2ff);
  z-index: 0;
}

.user-info {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  padding: 20px 15px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: rgb(230, 230, 230);
  flex-shrink: 0;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info {
  flex: 1;
  margin-left: 15px;
  padding-top: 5px;
  min-width: 0;
}
.email {
  font-size: 16px;
  margin-bottom: 8px;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  color: rgb(51, 51, 51);
  font-weight: 700;
}
.uid {
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.9;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  color: rgb(51, 51, 51);
  font-weight: 700;
}
.balance {
  font-size: 14px;
  opacity: 0.9;
  color: rgb(51, 51, 51);
  font-weight: 700;
}

.credit {
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.9;
  color: #cddc39;
  font-weight: 700;
}

.credit .label {
  margin-right: 5px;
}

.menu-list {
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f5f5;
  margin: 12px;
}

.menu-item {
  display: flex;
  align-items: center;
  background: white;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.icon-wrapper {
  margin-right: 10px;
  font-size: 18px;
}

.payment-icon {
  color: #1989fa;
}

.verify-icon {
  color: #07c160;
}

.message-icon {
  color: #ff976a;
}

.settings-icon {
  color: #646566;
}
:deep(.van-cell__title) {
  font-size: 15px;
  color: #333;
}
</style>
